﻿@{
    ViewBag.Title = "Statistic";
}

<style type="text/css">
    .divSty {
        padding: 10px 15px 10px 15px;
    }

    .divheadSty {
        margin-top: 1px;
        padding: 1px 15px 10px 15px;
    }

    .titleSty {
        font-size: 1.3em;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
    }

    .tbSty {
        width: 100%;
        table-layout: fixed;
        border: solid #9D9D9D;
        border-width: 1px 0px 0px 1px;
    }

    .tdSty {
        word-wrap: break-word;
        text-align: center;
        vertical-align: middle;
        border: solid #9D9D9D;
        border-width: 0px 1px 1px 0px;
        font-size: 0.8em;
    }

    .tdheaderSty {
        text-align: center;
        vertical-align: middle;
        border: solid #9D9D9D;
        border-width: 0px 1px 1px 0px;
        font-size: 0.9em;
        height: 35px;
        font-family: 'Microsoft YaHei';
    }

    .headerSty {
        word-wrap: break-word;
        text-align: center;
        vertical-align: middle;
        background-color: #2573c7;
        color: #FFFFFF;
    }

    .btnSty {
        width: 120px;
        height: 28px;
        margin: auto 10px auto 10px;
        vertical-align: central;
    }

    .selectSty {
        height: 26px;
        width: 210px;
    }

    .pitdSty {
        margin-top: 20px;
        text-align: center;
        vertical-align: central;
        font-size: 0.8em;
        background-color: #f4f4f4;
        border: solid #ccccca;
        border-width: 0px 1px 1px 0px;
    }

    .pitable {
        width: 100%;
        font-size: 0.8em;
        border: solid #ccccca;
        border-width: 1px 0px 0px 1px;
    }
</style>

<script type="text/javascript" src="~/Scripts/echarts.common.min.js"></script>

<script type="text/javascript">

    function GenereteQuerySQLPie() {
        $("#chart").empty();

        var v = $("#Select1").attr("value");

        var json = {
            Key: v
        };

        $.ajax({
            url: app + "/Land/QueryStatistic",
            type: "Post",
            data: json,
            success: function (data) {
                if (data != null) {
                    DrawPie(JSON.parse(data), "chart");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus + "     " + errorThrown);
            }
        });
    }

    function GenereteQuerySQLBar() {
        $("#chart").empty();

        var v = $("#Select1").attr("value");

        var json = {
            Key: v
        };

        $.ajax({
            url: app + "/Land/QueryStatistic",
            type: "Post",
            data: json,
            success: function (data) {
                if (data != null) {
                    DrawBar(JSON.parse(data), "chart");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus + "     " + errorThrown);
            }
        });
    }

    function DrawPie(pieData, id) {
        var dom = document.getElementById(id);
        var myChart = echarts.init(dom);
        option = null;
        option = {
            title: {
                show: true,
                //text: '土地获取方式',
                x: 'center'
            },
            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series: [{
                name: 'test',
                type: 'pie',
                radius: '55%',
                data: pieData,
                //roseType: 'angle',
                itemStyle: {
                    normal: {
                        shadowBlur: 200,
                        label: {
                            show: true,
                            formatter: '{b} : {c} ({d}%)'
                        },
                        labelLine: { show: true }
                    }
                }
            }]
        };;

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }

    function DrawBar(pieData, id) {

        var xValue = new Array();
        var yValue = new Array();

        for (var i = 0; i < pieData.length; i++) {
            xValue[i] = pieData[i].name;
            yValue[i] = pieData[i].value;
        }

        var dom = document.getElementById(id);
        var myChart = echarts.init(dom);
        option = null;
        option = {
            //title: {
            //    text: 'ECharts 入门示例'
            //},
            tooltip: {},
            legend: {
                data: ['面积']
            },
            xAxis: {
                data: xValue
            },
            yAxis: {},
            series: [{
                //name: '销量',
                type: 'bar',
                data: yValue,
                itemStyle: {
                    normal: {
                        shadowBlur: 200,
                        label: {
                            show: true,
                            formatter: '{b} : {c}',
                            textStyle: {
                                color: '#000'
                            }
                        },
                        labelLine: { show: true }
                    }
                }

            }]
        };;

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
</script>
<div style="width: 100%; margin-left: auto; margin-right: auto; text-align: center; height: 20px">
    <p class="titleSty">信息统计</p>
</div>
<div class="divheadSty">
    <table style="width: 100%">
        <tr>
            <td style="text-align: left">
                <table style="width: 100%">
                    <tr>
                        <td class="texttdSty">统计条件</td>
                        <td>
                            <select id="Select1" class="selectSty">
                                <option value="land_getway">土地取得方式</option>
                                <option value="land_type">土地性质</option>
                                <option value="land_range">土地区域范围</option>
                            </select>
                        </td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <div style="float: right;">
                    <table>
                        <tr>
                            <td>
                                <input id="Button1" class="btnSty" type="button" value="统计-柱状图" onclick="GenereteQuerySQLBar()" />
                            </td>
                            <td>
                                <input id="Button1" class="btnSty" type="button" value="统计-饼状图" onclick="GenereteQuerySQLPie()" />
                            </td>
                            <td>
                                @*<input id="Button2" class="btnSty" type="button" value="导出Excel" />*@
                            </td>
                            <td>
                                @*<input id="Button3" class="btnSty" type="button" value="打印" />*@
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>


<div id="chart" style="width: 800px; height: 500px; margin: 0px auto"></div>


<div class="divSty">
    @*<table class="tbSty" cellspacing="0">
            <tr class="headerSty">
                <td class="tdheaderSty" style="width: 8%">宗地编号</td>
                <td class="tdheaderSty" style="width: 8%">土地面积</td>
                <td class="tdheaderSty" style="width: 10%">土地使用人</td>
                <td class="tdheaderSty" style="width: 12%">所属二级单位</td>
                <td class="tdheaderSty" style="width: 10%">土地取得方式</td>
                <td class="tdheaderSty" style="width: 10%">土地性质</td>
                <td class="tdheaderSty" style="width: 10%">土地区域范围</td>
                <td class="tdheaderSty" style="width: 9%">是否有土地证</td>
                <td class="tdheaderSty" style="width: 10%">是否抵押/担保</td>

            </tr>
            <tr>
                <td class="tdSty">10000001002</td>
                <td class="tdSty">30000000</td>
                <td class="tdSty">中国人共和国红色政权所有土地啊哈哈</td>
                <td class="tdSty">北京市中南海艺术团团体慰问演出长度不够</td>
                <td class="tdSty">划拨</td>
                <td class="tdSty">综合办公科研用地</td>
                <td class="tdSty">核心区域</td>
                <td class="tdSty">否</td>
                <td class="tdSty">哦</td>

            </tr>
        </table>*@
</div>
